<template>
 <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/juese' }">系统管理 </el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/juese'}">用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form class='yonghuForm'>
      <el-row style="float: left; margin-left: 66px;margin-top: 17px;">
      用户名称:<el-input v-model="uname" style="width: 150px"></el-input>
      使用状态:<el-select v-model="value" placeholder="请选择" style="width: 150px">
             <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.lable"
               :value="item.value">
             </el-option>
           </el-select>
      <el-button @click='chaxun()' icon="el-icon-search" type="primary" style="margin-left: -4px">查询</el-button>
      <el-button @click='tianjia()' icon="el-icon-edit" type="primary" style="margin-left: -2px;">添加用户</el-button>
      </el-row>
    </el-form>
    <el-table :data='yonghu' style="width: 1000px; margin: auto;" @expand-change="exchange">
      <el-table-column type="expand">
        <template slot-scope="scope">
         <el-table v-if="scope.row.roles!=null" :data="scope.row.roles">
           <el-table-column label="角色编号" prop="rid"></el-table-column>
           <el-table-column label="角色名称 " prop="rname"></el-table-column>
         </el-table>
         </template>
      </el-table-column>
      <el-table-column label="用户账号" prop="uid" width="120px" ></el-table-column>
      <el-table-column label="用户名称" prop="uname"  width="120px"></el-table-column>
      <el-table-column label="邮箱" prop="email"  width="120px"></el-table-column>
      <el-table-column label="状态"  width="120px">
      <template slot-scope="scope">
        <el-switch
        active-color="#13ce66"
        inactive-color="#ff4949"
       v-model="scope.row.isstatus"
       :active-value="1"
       :inactive-value="0"
       @change="chageSwitch($event,scope.row,scope.$index)"
       >

       </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" label-width="120px">
        <template slot-scope='scope'>
          <el-button @click='update(scope.row)'>修改</el-button>
          <el-button @click="logsss(scope.row)">LOG日志</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="page" @prev-click="page" @next-click="page" background
    layout="prev,pager,next,total,jumper"
      :total="total" :page-size="
      size"></el-pagination>
      <!-- 修改用户的弹窗-->
   <el-dialog title="修改用户" :visible="visible" @close="visible=false">
      <el-form :model="user">

          <el-form-item label="用户名称" label-width="80px">
            <el-input v-model="user.uname"></el-input>
          </el-form-item>
          <el-form-item label="密码" label-width="80px">
            <el-input v-model="user.pwd" show-password></el-input>
          </el-form-item>
          <el-form-item label="邮箱" label-width="80px">
            <el-input v-model="user.email" ></el-input>
          </el-form-item>
          <el-form-item label="角色" label-width="80px">
             <el-select v-model="user.roles" style="width: 500px;" multiple :multiple-limit="3" value-key="rid">
             <el-option v-for="item in rname" :label="item.rname" :value="item" :key='item.rid'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入职日期" label-width="80px">
            <el-date-picker
                        v-model="user.rdate"

                         format="yyyy-MM-dd"
                         value-format="yyyy-MM-dd"
                        >
                      </el-date-picker>
          </el-form-item>
          <el-form-item label="离职日期" label-width="80px">
            <el-date-picker
                        v-model="user.ldate"

                       format="yyyy-MM-dd"
                       value-format="yyyy-MM-dd"
                        >
                      </el-date-picker>
          </el-form-item>
          <el-form-item label="使用状态" label-width="80px">
            <template>
              <el-radio v-model="user.isstatus" :label="1">正常</el-radio>
              <el-radio v-model="user.isstatus" :label="0">冻结</el-radio>
            </template>
          </el-form-item>
      </el-form>
      <template slot="footer">
      	<el-button type="primary" @click="closeMe">确定</el-button>
      	<el-button type="info" @click="visible=false">取消</el-button>
      </template>
      </el-dialog>
      <!-- 增加用户的弹窗-->
    <el-dialog :visible="visible2" @close="visible2=false" title="添加用户">
      <el-form :rules="formRoles" :model="user">
          <el-form-item label="用户名称" label-width="80px" prop="uname">
          <el-input v-model="user.uname"></el-input>
          </el-form-item>
          <el-form-item label="登陆密码" label-width="80px" prop="pwd">
           <el-input placeholder="登陆密码初始值为123456" disabled />
          </el-form-item >
          <el-form-item label="电话" label-width="80px">
          <el-input  v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item label="角色" label-width="80px" prop="rid">
          <el-select v-model="user.roles" multiple :multiple-limit="3" value-key="rid">
            <el-option v-for="item in rname" :label="item.rname" :value="item" :key='item.rid'></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="性别" label-width="80px">
          <el-select v-model="user.sex">
            <el-option v-for="item in sex" :label="item.lable" :value="item.value" :key='item.value'></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="出生日期" label-width="80px">
         <el-date-picker class="k1"
                     v-model="user.born"
                     format="yyyy-MM-dd"
                     value-format="yyyy-MM-dd"
                     >
                   </el-date-picker>
          </el-form-item>
          <el-form-item label="入职时间" label-width="80px">
          <el-date-picker class="k1"
                      v-model="user.rdate"
                      align="right"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      >
                    </el-date-picker>
          </el-form-item>
          <el-form-item label="离职时间" label-width="80px">
         <el-date-picker class="k1"
                     v-model="user.ldate"
                     align="right"
                     format="yyyy-MM-dd"
                     value-format="yyyy-MM-dd"
                     >
                   </el-date-picker>
          </el-form-item>
          <el-form-item label="邮箱" label-width="80px">
            <el-input v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item label="使用状态">
          <template>
            <el-radio v-model="user.isstatus" :label="1">正常</el-radio>
            <el-radio v-model="user.isstatus" :label="0">冻结</el-radio>
          </template>
          </el-form-item>
        </el-form>
        <template>
          <el-button @click='colseMe2()'>确定</el-button>
          <el-button @click='visible2=false'>取消</el-button>
        </template>
      </el-dialog>
      <!-- 用户的LOG日志-->
      <el-dialog :visible="visible3" @close="visible3=false" title="产看LOG日志" >
        <el-table :data="logs" style="width: 500px;">
          <el-table-column label="序号" prop="lid"></el-table-column>
          <el-table-column label="用户名" prop="userName"></el-table-column>
          <el-table-column label="操作信息" prop="linfo"></el-table-column>
          <el-table-column label="操作时间" prop="ldate"></el-table-column>
        </el-table>
        <el-pagination @current-change="page2" @prev-click="page2" @next-click="page2" background
        layout="prev,pager,next,total,jumper"
          :total="total2" :page-size="
          2"></el-pagination>
      </el-dialog>
    </div>
</template>

<script scoped='scoped'>
  import axios from 'axios'
  import moment from 'moment'
  export default{
    data(){
      return{
      formRoles:{
        uname:[ { required: true, message: '请输入用户名', trigger: 'blur' }
            ],
        pwd:[ { required: true, message: '请输入密码', trigger: 'blur' },
         { min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
            ],
            rid:[ { required: true, message: '请选择角色', trigger: 'blur' }
                ]

      }
      ,
      options: [{
               lable: '冻结',
               value:0
             }, {
               lable: '正常',
               value:1
             }],
      value: '',
      yonghu:[],
       total:0,
        total2:0,
       visible:false,
       jueses:'选择角色',
        rname:[],
        sex:[{
          value:0,
          lable:'男'
        },
        {
          value:1,
          lable:'女'
        }
        ],
       yonghu2:{},
       visible2:false,

       user:{
         uid:'',
         uname:'',
         pwd:'123456',
         roles:[],
         phone:'',
         sex:0,
         born:'',
         rdate:'',
         ldate:'',
         email:'',
         createby:'',
         isstatus:1
       },
       visible3:false,
       logs:[],
       no:'',
       size:5,
       uname:'',
       jueseDate:[],
       click:true

      }
    }
    ,
    methods:{
      chaxun:function(){
        this.click=false
        console.log(this.uname)
        console.log(this.value)
       axios.get("http:lcaolhost:8086/user/where",{params:{
        name:this.uname,
        isstatus:this.value,
        pageNo:1,
        pageSize:this.size
        }}).then(vs=>{
         this.yonghu=vs.data.list
         console.log(vs.data.list)

         this.total=vs.data.total
        }).catch(r=>{
          console.log(r)
        })
      },
      /**
       * @param {Object} curpage
       */
      getRname:function(){
        var self=this
        axios.get("http:localhost:8086/role/rname")
        .then(v=>{
          console.log(v.data)
          this.rname=v.data
          console.log(this.rname,2)
        }).catch()
      },
      /**获取页面数据*/
      getData:function(curpage){
      axios.get("http:localhost:8086/user/all",{params:{
          pageNo:curpage,
          pageSize:this.size
        }}).then(vs=>{
          this.yonghu=vs.data.list
          console.log(vs.data.list)

          this.total=vs.data.total
        }).catch(err=>console.log(err))
      },
      page:function(curpage){
        if(this.click){
           this.getData(curpage,5)
        }else{
        axios.get("http:lcaolhost:8086/user/where",{params:{
         name:this.uname,
         isstatus:this.value,
          pageNo:curpage,
          pageSize:this.size
         }}).then(vs=>{
          this.yonghu=vs.data.list
          console.log(vs.data.list)

          this.total=vs.data.total
         }).catch(r=>{
           console.log(r)
         })
        }

      },
      page2:function(curpage){
      this.getData2(curpage,5,this.no)
      },
      remove:function(row){
        this.yonghu.splice(row,1)
      },
      /**
       * 修改传值
       * @param {Object} row
       */
      update:function(row){
      axios.get("http:localhost:8086/role/getByRids",{params:{
                uid:row.uid
              }}).then(vs=>{
                row.roles=vs.data
              })
      var self=this
      row.roles.forEach(function(item){
        if(item.rname==='系统管理员'){
          self.$message('系统管理员不能修改!')
          return
        }

      })
      this.user=row
      this.visible=true
      console.log(1)
      }
      ,
      /**
       * 确定修改
       */
      closeMe(){
        console.log(this.user,1)
        console.log(this.user.roles)

        var self=this


        axios.post("http:localhost:8086/user/updateAll",
        this.user
        ).then(vs=>{
        this.$message("修改成功!")
        this.visible=false
        this.getData(1,5)
        }).catch(r=>{
          this.$message("修改失败")
        })

      }
      ,
      dongjie(row){
      console.log(row.type)
      row.type='冻结'
      }
      ,tianjia(){
        this.visible2=true
      }
      /**
       * 添加用户
       */
      ,colseMe2(){
        if(this.user.rid==''){
          this.$message('角色没有选择')
          return
        }
        if(this.user.uname==''){
           this.$message('用户名没有填写')
          return
        }
        if(this.user.pwd==''){
           this.$message('密码没有填写')
          return
        }
       var self=this
        this.user.createby=this.$store.state.user.uname

        axios.post("http:localhost:8086/user/add",this.user


    ).then(v=>{
      if(v.data){
        this.$message("添加成功")
        this.user={}
        this.getData(1,5)
      }else{
        this.$message("添加失败，用户名重复")
      }

      }).catch()

        this.visible2=false
      }
      ,logsss(row){
        console.log(row)
        this.getData2(1,5,row.uid)
        this.visible3=true
      }
      ,


      getData2(curpage,pagesize,uid){
        axios.get('http:localhost:8086/log/all',{params:{
          pageNum:curpage,
          pageSize:pagesize,
          uid:uid
        }}).then(vs=>{
          this.logs=vs.data.list
          this.total2=vs.data.total
        }).catch(err=>console.log(err))
      }
      , chageSwitch(data,b,index){
        if(b.role.rname=='系统管理员'){
          this.$message('系统管理员不能冻结!')
          this.getData(1,5)
          return
        }
        console.log(data)
        console.log(b)
        console.log(index)
        axios.get("http:localhost:8086/user/update",{params:{
          uid:b.uid,
          isstatus:data
        }}).then(d=>{
          this.getData(1,5)
        }).catch()
        }
        ,   aaa:function(asd){
                var date = new Date(asd) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                        var Y = date.getFullYear() + '-'
                        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
                        var D = date.getDate() + ' '
                        var h = date.getHours() + ':'
                        var m = date.getMinutes() + ':'
                        var s = date.getSeconds()

                console.log(Y+M+D+h+m+s);
                return Y+M+D+h+m+s;
              },
              exchange:function(row,rowList){
              /*  var rids="";
              row.roles.forEach(function(item){
               rids+=item.rid+",";
              }) */
             axios.get("http:localhost:8086/role/getByRids",{params:{
                uid:row.uid
              }}).then(vs=>{
                row.roles=vs.data
              })
              console.log(this.jueseDate)

              }


    }
    ,created:function(){
    this.getData(1)
    this.getRname()
    }
  }
</script>

<style scoped="scoped">
 /* .yonghuForm{
    margin-bottom: -50px;
    margin-left: -260px;
  }
  .yonghuForm .el-form-item{
    display: inline-block;
  } */
</style>
